<template>
	<uni-forms ref="refMyForm" :rules="defaultRules" v-bind="$attrs">
		<template v-for="(item,index) in formItem" :index="index">
			<uni-forms-item :label="item.label" :name="item.prop" :required="item.required" v-if="item.show !== false">
				<slot :name="item.prop" :prop="item.prop" :item="item">
					<my-select v-if="item.itemType === 'select'" v-model="$attrs.model[item.prop]"
						:placeholder="`请选择${item.label}`" v-bind="item"></my-select>
					<!-- <my-popup-select v-else-if="item.itemType === 'multipleSelect'" v-model="$attrs.model[item.prop]"
						v-bind="item"></my-popup-select> -->
					<my-cascader v-else-if="item.itemType === 'cascader'" v-model="$attrs.model[item.prop]"
						:placeholder="`请选择${item.label}`" v-bind="item"></my-cascader>
					<uni-datetime-picker v-else-if="item.itemType === 'date'" v-model="$attrs.model[item.prop]"
						v-bind="item" />
					<uni-easyinput v-else-if="item.itemType === 'textarea'" v-model="$attrs.model[item.prop]"
						:placeholder="`请输入${item.label}`" v-bind="item" />
					<my-upload v-else-if="['video', 'image'].includes(item.itemType)" v-model="$attrs.model[item.prop]"
						:accept="item.itemType">
					</my-upload>
					<u-radio-group v-else-if="item.itemType === 'radio'" v-model="$attrs.model[item.prop]"
						placement="row">
						<u-radio :label="radio.label" class="m-l-10" :name="index"
							v-for="(radio,index) in item.list"></u-radio>
					</u-radio-group>
					<!-- <zxz-uni-data-select v-else-if="item.itemType === 'multipleSelect'" v-bind="item"
						v-model="$attrs.model[item.prop]" multiple filterable dataKey="label"
						dataValue="value"></zxz-uni-data-select> -->
					<uni-easyinput v-else v-model="$attrs.model[item.prop]" :placeholder="`请输入${item.label}`"
						v-bind="item" />
				</slot>
			</uni-forms-item>
		</template>
	</uni-forms>
</template>
<script setup name="myForms">
	import {
		computed
	} from "vue";
	const props = defineProps({
		formItem: {
			type: Array,
			required: true
		},
		rules: {
			type: Object,
			default: () => ({})
		}
	})
	const defaultRules = computed(() => {
		let rules = Object.create(null);
		props.formItem.forEach((item) => {
			if (!!item.required) {
				rules[item.prop] = {
					rules: [{
						required: true,
						errorMessage: `${item.label}不能为空`
					}]
				};
			}
		});
		return Object.assign(rules, props.rules);
	})
</script>
<style>
</style>